<template>
	<view class="publish">
		<u-navbar  title="" back-text="二手放盘" :is-back="true"  :background="{ background: '#000' }" :back-text-style="{color:'#FFF'}" back-icon-color="#FFF"> </u-navbar>
		<div class="head">
            <div class="flex">
				
				<div class="text flex1 mote-before">
					<div class="mote">座右铭:</div>
					{{ user.motto ||'你今天走的每一步, 都会算数！' }}
				</div>
				<div class="user-info">
					<div class="user-img item-img"></div>
					<div class="user-name">{{ user.realname || user.nikename || user.username || '张先生' }}</div>
					<div class="user-no">编号:{{ user.userId || '00073' }}</div>
				</div>
			</div> 
		</div>
		<view class="bar"></view>
		<div class="tools ">
			<div class="line yellow">
				<div class="txt center">小区</div>
				<div class="flexItem"> <input type="text" @click="toPage('/pages/map/index')" v-model="propertyName"
				placeholder-style="color: #ccc;font-size:12px" 
				placeholder="请选择小区或者物业地址位置" class="addr"   readOnly disabled  /> </div>
			</div>
			<div class="line" style="margin:10px 0 0 0 ">
				<div class="fangpan txt center">放盘</div>
				<div :class="'flexItem  ' + (mode==1?'col2':'col1')" @click="changeMode(1)">出售</div>
				<div :class="'flexItem  ' + (mode==2?'col2':'col1')" @click="changeMode(2)">出租</div>
			</div>
		</div>
		<view class="bar"></view>
		<div class="main flex">
            <div class="tab-navs">
				<div :class="tab==i?'tab-nav center cur-tab':'tab-nav center'" v-for="(e,i) in tabs" @click="tab = i" :key="i">{{ e }}</div>
			</div>
			<div class="tab-content flexItem">
				<Type v-show="tab==0"/> 
				<Hose v-show="tab==1"/> 
				<Area v-show="tab==2"/> 
				<Feature v-show="tab==3"/> 
				<Price v-show="tab==4"/> 
				<Picture v-show="tab==5"/> 
				<Desc v-show="tab==6"/> 
				<Status v-show="tab==7"/> 
			</div>
		</div>
		<div class="btns flex center ">
			<div class="btn p-btn" @click="submit(0)">保存</div>
			<div class="btn p-btn" @click="submit(1)">提交</div>
		</div>
		<tabBar/>
	</view>
</template>

<script>
	import {
		useI18n
	} from 'vue-i18n'
	import mixins from '@/common/mixin.js'
	export default {
		mixins: [mixins],
		data() {
			return {
              tab:4,
			  mode:1,
			  tabs:"类型,门牌,面积,特色,价格,照片,描述,状态".split(","),
			  propertyName:"",
			  tmp:{},
			  user:{},
			}
		},
		created() {
			this.t = useI18n().t
			this.tmp =  this.$store.state.publishInfo;
			this.mode = this.tmp.mode
			this.propertyName = this.tmp.propertyName
			this.propertyName  = uni.getStorageSync("propertyName")
			console.log("input 的值", this.propertyName );
		},
		mounted() {
			console.log("页面更新时获取地点信息");
			console.log(this.$store.state.map);
		},
		methods: {
			async getUserInfo(){
				var res = await this.ajax('/wx/user/getInfo')
				console.log("查询用户", res);  
				this.user = res.data
				this.$store.dispatch("asyncApiUserInfo", res.data);
			},
			changeMode(index){
			  this.mode = index	
			  this.$store.dispatch("asyncPublishInfo", { mode: index,saleType:index });
			},
			async load() { 
				var th = this;
				var id = uni.getStorageSync("id")
				 th.ajax( id!="0" ? "/wx/property/getInfoByAuth/" + id: '/wx/property/loadTemp',{},'GET').then((res) => {
				     th.handelApiData(res);
				 });
			},
			async submit(index) {
				var th = this; 
				var id = uni.getStorageSync("id")
				var { tmp,publishInfo,ztLocation,ztSpace,ztPrice} = this.$store.state
				
				console.log("获取缓存id= ",id);
				th.ajax( id!="0" ?  '/wx/property': '/wx/property/addTemp',this.getPageData(),'POST').then((res) => {
					console.log("保存物业接口返回",res);
				}); 
			}, 
			getPageData(){
				  var { ztLocation,ztSpace,publishInfo,tmp,ztPicture,ztPrice,ztLocation,map } = this.$store.state;
				  console.log("页面数据来源对象",ztLocation,ztSpace,publishInfo);
				  console.log("提交时查看地点信息",map);
				  var data = publishInfo;
				  data.propertyName = "wz-測試物業"
				  data.slogan = tmp.slogan
				  data.describe = tmp.describe
				  data.ztLocation = ztLocation;
				  data.ztSpace = ztSpace; 
				  data.ztPicture = ztPicture; 
				  data.ztPrice = ztPrice
				  data.ztPrice = ztPrice 
				  data.propertyPermission =data.propertyPermission == "false" ? 0 : 1; 
				  data.cooperationAmount = parseFloat(data.cooperationAmount||0);
				  data.cooperationProportion = parseFloat(data.cooperationProportion||0);
				  data.cooperationType = parseFloat(data.cooperationType||0); 
				  data.ztLocation.building = parseFloat(ztLocation.building||0);
				  data.ztLocation.certificateType = parseFloat( ztLocation.certificateType||0);
				  data.ztLocation.storey = parseFloat(ztLocation.storey||0);
				  data.ztLocation.totalStorey = parseFloat(ztLocation.totalStorey||0);
				  data.ztSpace.balcony = parseFloat(ztSpace.balcony);
				  data.ztSpace.basement = parseFloat(ztSpace.basement||0);
				  data.ztSpace.carport = parseFloat(ztSpace.carport||0);
				  data.ztSpace.coveredArea = parseFloat(ztSpace.coveredArea||0);
				  data.ztSpace.gardenArea = parseFloat(ztSpace.gardenArea||0);
				  data.ztSpace.householdStorey = parseFloat(ztSpace.householdStorey||0);
				  data.ztSpace.insideArea = parseFloat(ztSpace.insideArea||0);
				  data.ztSpace.interlayer = parseFloat(ztSpace.interlayer||0);
				  data.ztSpace.interlayerHeight = parseFloat(ztSpace.interlayerHeight||0);
				  data.ztSpace.lift = parseFloat(ztSpace.lift||0);
				  data.ztSpace.parlor = parseFloat(ztSpace.parlor||0);
				  data.ztSpace.room = parseFloat(ztSpace.room||0);
				  data.ztSpace.totalFloor = parseFloat(ztSpace.totalFloor||0);
				   
				  console.log("处理的数据=",data);
				  return data;
			},
			handelApiData(res){
			  var tmp = {};
			  var th = this;
			  tmp.ztApproval = res.data.ztApproval || {};
			  tmp.ztFeature = res.data.ztFeature || {};
			  tmp.ztLocation = res.data.ztLocation || {};
			  tmp.ztPicture = res.data.ztPicture || {};
			  tmp.ztPrice = res.data.ztPrice || {};
			  tmp.ztSpace = res.data.ztSpace || {};
			  th.saleTyp = res.data.saleTyp;
			  th.propertyName = res.data.propertyName;
			  this.$store.dispatch("asyncPublishInfo", tmp);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}

	.publish {
		//visibility: hidden;
		display: flex;
		flex-direction: column;
		padding: 0 0vw;
		.mote-before{
			border-left: 5px solid;
			padding-left: 5px;
			margin: 5px 20px;
		}
		.mote{
			background: #FBD100;
			color: #FFF;
			padding: 2px 4PX;
			width: 50px;
			font-size: 12PX;
		}
		.bar{
			border-bottom: 10PX solid #EEE;
		}
		/*HEAD*/
		.head{
			padding: 5px 10px 15px 5px;
			.flex{
				align-items: flex-start;
			}
		}
		.text{
			font-size: 16px;
			font-weight: 600;
			 
		}
		.user-info{
			.user-img{
				width: 50px;
				height: 50PX;
				border-radius: 50%;
			}
			.user-name{
				font-weight: 600;
			}
			.user-no{
				color: #939393;
				font-size: 12px;
			}
		}
		/*TOOL*/
		.tools{
			font-weight: 600;
			padding: 10px 0;
			.yellow{
				background: #FBD100;
			}
			.txt{
				width: 70px;
				height: 40px;
				
			}
			.addr{
				height: 30px;
				border-radius: 8px;
				margin: 4px 10px;
				background: #FFF;
				text-align: center;
			}
			.fangpan{
				background-color: #EEE;
				padding: 10px 0px;
			}
			.col1{
				  background: #EEE;
				  margin: 0 5px;
				  padding: 10px 20px;
				  border-radius: 0 0 10px 0;
				  flex: 1;
				  clip-path: polygon(0 0, 100% 0, 100% 50%, 85% 100%, 0% 100%);
			}
			.col2{
				  background: #FBD100;
				  margin: 0 5px;
				  padding: 10px 20px;
				  border-radius: 0 0 10px 0;
				  flex: 1;
				  clip-path: polygon(0 0, 100% 0, 100% 50%, 85% 100%, 0% 100%);
			}
		}
		/*NAVS*/
        .tab-navs{
		   padding-top: 10px;
		  .tab-nav{
			  width: 80px;
			  height: 40px;
              background: #EEE; 
			  color: #ccc;
			  font-weight: 600;
		  }
		  .cur-tab{
			  background: #FFF; 
			  color: #000;
		  }
		}
		.main{
			align-items: flex-start;
		}
		.tab-content{
			height: 100%;
			overflow: auto;
			padding: 10px 10px 10px 20px;
		}
		.btns{
			background: #eee;
			font-size: 12px;
		}
		.p-btn {
			width: 100px;
			margin: 10px;
			background: #FBD100;
			border:2px solid #6C5945;
			width: 100PX;
			height: 30px;
		}
	}
</style>